<div class="dispatch-main-container">
  <div class="center-panel">
    <div class="bar">
      <div class="weather">
        <app-weather-panel></app-weather-panel>
      </div>

      <div class="data">
        <app-data-panel [selectManageId]="'6'"></app-data-panel>
      </div>

      <div class="buttons">
        <div class="button-group">
          <nz-badge>
            <button class="btn-1" nz-button nzType="default" (click)="openApplyModal()">加减水调度</button>
          </nz-badge>

         <!-- <nz-badge>
            <button class="btn-2" nz-button nzType="default" (click)="jskllModalShow=true">干渠进水口流量</button>
          </nz-badge>
-->
          <nz-badge>
            <button class="btn-3" nz-button nzType="default" (click)="openJqsbModal()">警情上报</button>
          </nz-badge>

          <nz-badge>
            <button class="btn-4" nz-button nzType="default" (click)="openRecordModal()">水量调度记录</button>
          </nz-badge>
          <nz-badge>
            <button class="btn-5" nz-button nzType="default" (click)="openDutyRecordModal()">交接班记录</button>
          </nz-badge>
            <nz-badge>
                <button class="btn-6" nz-button nzType="default" (click)="openReportModal()">报送一览</button>
            </nz-badge>
        </div>
      </div>

    </div>

    <div class="canvas-wrap" #canvasDiv>
      <div id="topology-canvas" style="width: 100%; height: 100%;"></div>

      <div class="gate-info" *ngIf="infoShow" [ngStyle]="{

                 'top': hoverItem.top,
                 'left': hoverItem.left
                 }">
        <div class="blue">警戒水位：{{hoverItem.alertLevel}}m</div>
        <div>当前水位：{{hoverItem.waterLevel}}m</div>
        <div class="blue">限定流量：{{hoverItem.limitTraffic}}m³/s</div>
        <div>当前引水流量：{{hoverItem.flow}}m³/s</div>
      </div>
    </div>
      <div class="center-chart-wrap">
          <div class="chart-select">
              <nz-select [nzAllowClear]="false"
                         nzPlaceHolder="渠道"
                         [(ngModel)]="defaultCanal"
                         (ngModelChange)="canalSelectionChange()"
                         style="width: 170px;float: right">
                  <nz-option *ngFor="let option of canalList"
                             [nzLabel]="option.label"
                             [nzValue]="option.value"></nz-option>
              </nz-select>
          </div>
          <div
              echarts
              [options]="barOpt"
              [merge]="barOptChange"
              style="height: 270px"
          ></div>
      </div>
  </div>
  <div class="right-panel">
    <app-glc-panel></app-glc-panel>
  </div>



  <nz-modal
    nzClassName="dispatch-modal"
    nzWidth="1360"
    [(nzVisible)]="applyModalShow"
    [nzTitle]="'加减水记录'"
    [nzFooter]="null"
    (nzOnCancel)="onApplyCancel()">
    <app-dispatch-record></app-dispatch-record>
  </nz-modal>

  <nz-modal nzClassName="dispatch-modal" nzWidth="1160" [(nzVisible)]="recordModalShow" [nzTitle]="recordTitle" (nzOnCancel)="recordModalShow=false" [nzFooter]="null">
    <ng-template #recordTitle>
      <div class="apply-title-wrap">
        <span class="title-text">水量调度记录</span>
      </div>
    </ng-template>
    <div style="padding: 10px">
      <app-water-record></app-water-record>
    </div>
  </nz-modal>


  <nz-modal nzClassName="dispatch-modal" nzWidth="1600" [(nzVisible)]="dutyRecordModalShow" [nzTitle]="dutyRecordTitle" (nzOnCancel)="dutyRecordModalShow=false">
    <ng-template #dutyRecordTitle>
      <div class="apply-title-wrap">
        <span class="title-text">交接班记录</span>
      </div>
    </ng-template>
    <div *nzModalFooter></div>
    <app-work-change></app-work-change>
    <div *nzModalFooter>
      <button nz-button nzType="default" (click)="dutyRecordModalShow=false">关闭</button>
    </div>
  </nz-modal>

  <nz-modal nzClassName="dispatch-modal" nzWidth="600" [(nzVisible)]="jqsbModalShow" [nzTitle]="jqsbTitle"
            (nzOnCancel)="jqsbModalShow=false">
    <ng-template #jqsbTitle>
      <div class="apply-title-wrap">
        <span class="title-text">警情上报</span>
      </div>
    </ng-template>
    <div *nzModalFooter></div>
    <div style="padding: 20px 10px 10px 10px;">
      <form nz-form [formGroup]="jqsbForm">
        <div nz-row [nzGutter]="24">
          <div nz-col [nzSpan]="24">
            <nz-form-item nzFlex>
              <nz-form-label [nzSm]="4" [nzXs]="24">标题</nz-form-label>
              <nz-form-control>
                <input nz-input formControlName="title" style="width: 400px">
              </nz-form-control>
            </nz-form-item>
          </div>

         <!-- <div nz-col [nzSpan]="24">
            <nz-form-item nzFlex>
              <nz-form-label [nzSm]="4" [nzXs]="24">渠道选择</nz-form-label>
              <nz-form-control>
                <nz-select nzPlaceHolder="请选择" formControlName="objId" style="width: 400px">
                  <nz-option *ngFor="let item of officeOption" [nzValue]="item.objId" [nzLabel]="item.name"></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
          </div>-->

          <div nz-col [nzSpan]="24">
            <nz-form-item nzFlex>
              <nz-form-label [nzSm]="4" [nzXs]="24">警情详情</nz-form-label>
              <nz-form-control>
                <textarea formControlName="info" nz-input rows="2" style="width: 400px"></textarea>
              </nz-form-control>
            </nz-form-item>
          </div>
        </div>
      </form>

      <div class="modal-button-wrap">
        <button nz-button class="btn-1" nzType="primary" (click)="onJqsbConfirm()">确认</button>
      </div>
    </div>

  </nz-modal>

  <nz-modal
    nzClassName="dispatch-modal"
    nzWidth="1200"
    [nzStyle]="{ top: '20px' }"
    [(nzVisible)]="jskllModalShow"
    (nzOnCancel)="jskllModalShow=false"
    [nzFooter]="null"
    nzTitle="干渠进水口流量">
    <div style="">
      <iframe [src]="qsJskllSrc" frameborder="0" style="height: 780px;width: 100%"></iframe>
    </div>
  </nz-modal>
</div>
